import React from "react";
import { Toast } from "antd-mobile";
import Html2Canvas from "html2canvas";

import "./PosterSaleTab.less";

const bgImg = require("@/assets/imgs/saleTab/sales-1.png");
const caidaiImg = require("@/assets/imgs/saleTab/caidai.png");
const dialogFrameImg = require("@/assets/imgs/saleTab/dialogFrame.png");
const qrcodeImg = require("@/assets/imgs/saleTab/qrcode.png");

export default class Login extends React.Component {
  state = {
    resultImg: "",
  };

  async componentDidMount() {
    this.getPosterImg();
  }

  posterHTML = React.createRef();

  isLoaded = false; // 图片加载完成

  // 3、生成海报图
  getPosterImg = async () => {
    let canvas, imageData, isTimeout;
    let loadInterval = null;
    Toast.loading("分享图生成中...", 20, () => {
      Toast.info("分享图生成超时~", 2);
      isTimeout = true;
      clearInterval(loadInterval);
      return;
    });
    // 等待图片加载完成
    await new Promise((resolve) => {
      loadInterval = setInterval(() => {
        if (this.isLoaded) {
          clearInterval(loadInterval);
          this.isLoaded = false;
          return resolve();
        }
      }, 1000);
    });

    canvas = await Html2Canvas(this.posterHTML.current, {
      // scale: window.devicePixelRatio,
      // scale: 1.5,
      scrollY: 0,
      scrollX: 0,
      allowTaint: true,
      useCORS: true, // 开启跨域配置
    });
    if (canvas && !isTimeout) {
      let imageType = "jpeg";
      imageData = canvas.toDataURL("image/" + imageType, 0.8);
      if (imageData.indexOf("base64") === -1) {
        Toast.info("生成分享图失败", 1.5);
        return "";
      }

      Toast.hide();
      this.setState({
        resultImg: imageData,
      });
      console.log("imageData---", imageData);
    }
  };

  // 图片加载完成
  imgLoaded = () => {
    console.log("imgLoaded");
    this.isLoaded = true;
  };

  render() {
    const { resultImg = "" } = this.state;
    return (
      <div className="posterWrap">
        <div ref={this.posterHTML} className="posterWrapHide">
          <div className="bgImg">
            <img src={bgImg} alt="" onLoad={this.imgLoaded} />
          </div>
          <div className="bottomImgBox">
            <img className="logoBottomImg" src={dialogFrameImg} alt="" />
            <div className="sayText">快来下单吧！</div>
          </div>
          <img className="caidaiImg" src={caidaiImg} alt="" />
          <div className="title">瑜小鱼·私房烘培</div>
          <div className="content">
            <div className="subTitle">生日蛋糕</div>
            <div className="item">
              5寸<span>128起</span>（1磅）适合2-3人品尝
            </div>
            <div className="item">
              6寸<span>168起</span>（1.5-2磅）适合4-8人品尝
            </div>
            <div className="item">
              6寸<span>球形188起</span> 适合4-8人品尝
            </div>
            <div className="item">
              8寸<span>268起</span>（3-3.5磅）适合8-12人品尝
            </div>
            <div className="item">
              10寸<span>358起</span>（5.5-6磅）适合12-20人品尝
            </div>
            <div className="item tips">&lt;两层以上请联系客服&gt;</div>
            <div className="item flavor">
              <span className="icon-cake" role="img" aria-label="蛋糕">
                🎂
              </span>
              蛋糕夹层口味：
            </div>
            <div className="item flavorContent">海盐奥利奥 芒果 红心火龙果</div>
            <div className="item flavorContent">哈密瓜 蜜桃慕斯夹心(选慕斯夹心加收10元)</div>

            <div className="item tips">&lt;更多口味请咨询客服&gt;</div>
            <div className="item flavor">
              <span className="icon-cake" role="img" aria-label="蛋糕">
                🎂
              </span>
              蛋糕胚口味：
            </div>
            <div className="item">默认原味戚风</div>
            <div className="item">以下口味戚风按尺寸加收</div>
            <div className="item">（￥10-￥20）</div>
            <div className="item flavorContent">抹茶 巧克力 伯爵红茶</div>
            <div className="item qrcodeImg">
              <img src={qrcodeImg} alt="" />
            </div>
            <div className="item tel">tel: 15986392720</div>
          </div>
        </div>
        <div className="mask"></div>
        {resultImg !== "" && (
          <div className="posterWrapTop">
            <div className="bgImg">
              <img src={resultImg} alt="" />
            </div>
          </div>
        )}
      </div>
    );
  }
}
